<template>
  <SearchList :columns="columns" :pagination="pagination" ref="refList"
              :load-data="loadData" :title="'接口日志'" :search-form="searchItems" />
</template>

<script setup lang="ts" name="callingLog">

import {ref} from "vue";
import {loadCallLogPage} from "@/apis";
import SearchList from "@/widget/list/SearchList.vue";
import {useStore} from "@/stores";
import {userDataWatch} from "@/utils/UseDataWatch";

const store = useStore();
const {refList} = userDataWatch(false);

const loadData = async (params: any) => {
  if ('全部' == params.type) {
    params.type = '';
  }

  const plat: any = store.getCurrentPlatform();
  return await loadCallLogPage({
    platformId: plat.id,
    ...params
  });
}

const pagination = ref<Pagination>({
  current: 1,
  pageSize: 20,
  total: 0,
});

const searchItems = ref([
  {
    type: 'select',
    name: 'type',
    label: '调用类型',
    size: 'default',
    placeholder: '',
    clearable: true,
    defValue: '全部',
    width: '160px',
    options: [
      {
        label: '全部',
        value: '全部',
      },
      {
        label: 'POST',
        value: 'POST',
      },
      {
        label: 'GET',
        value: 'GET',
      },
      {
        label: 'DELETE',
        value: 'DELETE',
      }
    ]
  },
  {
    type: 'input',
    name: 'clientId',
    label: '客户标识',
    size: 'default',
    placeholder: '请输入客户标识',
    clearable: true,
    defValue: '',
  },
]);

const tableAction = []
// const tableAction = [
//   {type: 'success', name: 'export', label: '导出', icon: 'TopRight',}
// ]
const columns = ref([
  {
    id: 'id',
    name: '标识',
    hideCol: true,
    show: false,
  },
  {
    id: 'clientId',
    name: '客户标识',
    show: true,
  },
  {
    id: 'type',
    name: '调用类型',
    show: true,
  },
  {
    id: 'costTime',
    name: '耗时(毫秒)',
    show: true,
  },
  {
    id: 'url',
    name: '地址',
    show: true,
  },
  {
    id: 'param',
    name: '调用参数',
    show: true,
  },
  {
    id: 'result',
    name: '结果',
    show: true,
  },
  {
    id: 'callTime',
    name: '调用时间',
    show: true,
  },
]);

const config = ref<SearchConfig>({
  hasSelect: false,
  showSearch: true,
  search: searchItems,
  tableAction: tableAction,
  title: '接口日志',
  setting: {
    showMoreSearch: false,
    showMoreButton: false,
    disableMoreButton: true,
    searchBackground: '#fff',
    extraSearchBackground: '#F7FBFE',
    rootBackground: '#f0f2f5',
    tableToolBackground: '#fff',
    tableToolRound: '2px',
    tableMargin: '16px 32px 16px',
    pageMargin: '',
  },
  layout: {
    buttonSize: 'default',
    actionButtonSize: 'default',
    inputSize: 'default',
  },
});

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

</style>
